<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">
            <div class="card relative border border-lg border-50 overflow-hidden px-0 py-0" :style="style">
                <img :src="value" class="block">
            </div>
            <input
                class="w-full form-control form-input form-input-bordered mt-2"
                :id="field.attribute"
                :dusk="field.attribute"
                v-model="value"
                :disabled="isReadonly"
                v-bind="extraAttributes"
            />
        </template>
    </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
    props: ['resourceId', 'relatedResourceName', 'relatedResourceId', 'viaRelationship'],
    mixins: [HandlesValidationErrors, FormField],

    computed: {
        style() {
            if (this.field.maxWidth) {
                return {
                    'max-width': `${this.field.maxWidth}px`,
                    'min-height': '30px',
                }
            } else {
                return {
                    'min-height': '30px',
                }
            }
        },
        extraAttributes() {
            const attrs = this.field.extraAttributes

            return {
                ...this.defaultAttributes,
                ...attrs,
            }
        },
    },
}
</script>
